<template>
  <div class="dropdown-menu">
    <div class="ceng" @click="close"></div>
    <div class="bank-card-box">
      <div class="item" v-for="(item,index) in bankCardList" :key="index">
        <div class="card-head__logo">
          <img src="@icon/logo-g.png" alt="">
        </div>
        <span class="span-text" :class="{'active':index == activeIndex}">{{ item.cardNumber }}</span>
        <div class="card-right__logo">
          <img src="@icon/进入箭头48_48 收起.png" alt="" v-if="index == 0">
          <img class="img2" src="@icon/矢量智能对象2.png" alt="" v-if="index == activeIndex">
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "dropdown-menu",
  props: ['bankCardList'],
  data(){
    return {
      activeIndex:1
    }
  },
  mounted() {

  },
  methods:{
    close(){
      this.$emit('close',false)
    }
  }
}
</script>

<style lang="stylus" scoped>
.dropdown-menu
  padding 8px 0
  position absolute
  right 50%
  margin-right -344px
  width 686px
  background #FFFFFF
  border 1px solid #E6E6E6
  box-shadow 0px 3px 8px 0px rgba(171, 171, 171, 0.35)
  border-radius 20px
  z-index 100
  :before
    content:""
    position:absolute
    top:-10px
    left:44%
    border-bottom:20px solid #fff
    border-left:20px solid transparent
    border-right:20px solid transparent
  .ceng
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    z-index 999
  .bank-card-box
    position relative
    z-index 1000
    max-height 450px
    overflow-y auto
    .item
      display flex
      align-items center
      padding 0 27px 0 33px
      height 90px
      color #333333

      .span-text
        padding 0 16px
        flex 1
        &.active
          color #07B7A0

      .card-right__logo
        width 48px
        height 48px
        display flex
        justify-content center
        img
          width 100%
          height 100%
        .img2
          width 22px
          height 16px
</style>